<template>
  <div class="integralShiftExchange">
    <c-title text="福利增值兑换"></c-title>
    <div class="convertible">可兑换的{{ pageInfo.integral_name }}：{{ pageInfo.integral }}</div>
    <div class="contenBox">
      <div class="contenBox_a" @click="showTap">
        <div class="title">兑换池：</div>
        <div class="inp">
          <van-field v-model="pool.title" label="" placeholder="选择兑换池" readonly :border="false" />
        </div>
        <van-icon name="arrow" color="#AAAAB3" />
      </div>
      <div class="contenBox_b">
        <div class="title_b">兑换金额</div>
        <div class="inp">
          ￥
          <van-field v-model="value" label="" placeholder="0.00" :border="false"/>
        </div>
      </div>
      <div class="btn" @click="submitTap">兑换金额</div>
    </div>
    <van-popup v-model="show" position="bottom" round :close-on-click-overlay="false">
      <van-picker title="选择兑换池" show-toolbar :value-key="'title'" :columns="pageInfo.pool_list" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      show: false,
      pageInfo: [],
      pool: {
        id: "",
        title: ""
      }
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    showTap() {
      this.show = true;
    },
    onCancel(val) {
      this.show = false;
    },
    onConfirm(val) {
      this.show = false;
      this.pool = val;
    },
    submitTap() {
      $http
        .post("plugin.integral-shift.frontend.modules.pool.controllers.shift.trade", { pool_id: this.pool.id, trade_value: this.value }, ".")
        .then(res => {
          if (res.result == 1) {
            this.$toast(res.msg);
            this.value = "";
            this.getData();
          } else {
            this.$toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getData() {
      $http
        .post("plugin.integral-shift.frontend.modules.pool.controllers.shift.page", {}, ".")
        .then(res => {
          if (res.result == 1) {
            console.log(res.data);
            this.pageInfo = res.data;
          } else {
            this.$toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.convertible {
  margin: 0.63rem 0.75rem;
  border-radius: 0.63rem;
  padding: 1.09rem 0.75rem;
  font-weight: 500;
  font-size: 0.88rem;
  background: #fff;
  text-align: left;
}
::v-deep .contenBox_b .van-field__body input::-webkit-input-placeholder {
  /* placeholder颜色 */
  color: #000;
  /* placeholder字体大小 */
  font-size: 1.3rem !important;
}
.contenBox {
  margin: 0 0.75rem;
  background: #fff;
  padding-bottom: 0.94rem;
  .btn {
    margin: 0 0.78rem;
    margin-top: 1.56rem;
    text-align: center;
    background: #f15353;
    color: #fff;
    border-radius: 1.25rem;
    padding: 0.78rem 0;
    box-sizing: border-box;
  }
  .contenBox_b {
    margin: 0 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 0.94rem;
    border-bottom: 1px solid #f0f0f1;

    .inp {
      display: flex;
      align-items: center;
      font-size: 1.5rem;
      .van-cell {
        font-size: 1.5rem;
        padding: 0;
      }
    }
    .title_b {
      font-size: 0.81rem;
      text-align: left;
      margin-top: 1.25rem;
      margin-bottom: 1.13rem;
    }
  }
  .contenBox_a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin:  0 0.75rem;
    border-bottom: 1px solid #f0f0f1;
    .inp {
      padding-left: 0.75rem;
      box-sizing: border-box;
      flex: 1;
      .van-cell {
        padding: 0;
      }
    }
    .title {
      flex-shrink: 0;
    }
  }
}
</style>
